import { computed } from "vue";
import {
  // create naive ui
  create,
  // 脱离上下文的 API
  createDiscreteApi,
  // component
  NConfigProvider,
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NCard,
  NSpace,
  NButton,
  NForm,
  NFormItem,
  NFormItemGi,
  NInput,
  NDataTable,
  NGrid,
  NGi,
  NUpload,
  NSplit,
  NSteps,
  NStep,
  NSelect,
} from "naive-ui";
import { useDesignSettingStoreHook } from "@/store/modules";

// 按需引入需要的Naive组件
const naive = create({
  components: [
    NConfigProvider,
    NLayout,
    NLayoutHeader,
    NLayoutContent,
    NCard,
    NSpace,
    NButton,
    NForm,
    NFormItem,
    NFormItemGi,
    NInput,
    NDataTable,
    NGrid,
    NGi,
    NUpload,
    NSplit,
    NSteps,
    NStep,
    NSelect,
  ],
});
const designSettingStore = useDesignSettingStoreHook();

const configProviderPropsRef = computed(() => ({
  theme: designSettingStore.theme,
  themeOverrides: designSettingStore.themeOverrides,
}));
// setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，通过 createDiscreteApi 来构建对应的 API
const { message, notification, dialog, loadingBar } = createDiscreteApi(
  ["message", "dialog", "notification", "loadingBar"],
  {
    configProviderProps: configProviderPropsRef,
  }
);
window && ((window as any)["$message"] = message);
window && ((window as any)["$dialog"] = dialog);
window && ((window as any)["$notification"] = notification);
window && ((window as any)["$loading"] = loadingBar);
export default naive;
